<template>
  <!-- 主页顶部头部组件 -->
  <div id="head">
    <div class="ng_top cs">
      <div class="ng_icon">
        <i class="el-icon-menu" @click="ElDrawer()"></i>
        <el-dropdown @command="handleCommand">
          <el-button type="primary" class="el-dropdown-link ng_button">
            {{ language }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh">中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="ng_user_name">
          <span
            class="el-icon-user-solid"
            @click="login()"
            v-if="this.$store.state.nameBool"
          ></span>
          <el-dropdown v-else>
            <span class="el-dropdown-link ng_span">
              <h5>{{ this.$store.state.userName }}</h5>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="personal">{{
                $t("user.personal")
              }}</el-dropdown-item>

              <el-dropdown-item @click.native="integ">{{
                $t("user.integ")
              }}</el-dropdown-item>

              <el-dropdown-item @click.native="myorder">{{
                $t("user.order")
              }}</el-dropdown-item>
              <el-dropdown-item @click.native="changepass">{{
                $t("user.Change")
              }}</el-dropdown-item>
              <el-dropdown-item @click.native="logout">{{
                $t("user.out")
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-badge
          :value="this.$store.getters.goodsValue"
          :max="99"
          :hidden="this.$store.getters.badgeBool"
          class="ng_item"
        >
          <span class="el-icon-s-goods" @click="shoppingTrolley()"></span>
        </el-badge>
        <!-- 搜索框 -->
        <div class="searchBox">
          <input
            type="text"
            v-model="searchValue"
            maxlength="30"
            @keypress.enter="onEnterPress"
          />
          <i class="el-icon-search" @click="search"></i>
        </div>
      </div>

      <h3>
        <router-link to="/"
          ><img src="./../../public/img/logo9.png" alt=""
        /></router-link>
      </h3>
      <div class="servicePhone">{{ $t("Footer.telephone") }}：400-0310-103</div>
      <el-drawer
        :visible.sync="drawer"
        :wrapperClosable="false"
        :direction="direction"
        :modal-append-to-body="false"
        :modal="true"
        size="100%"
      >
        <div class="drawer_content">
          <ul>
            <li @click="drawerRout(1)">
              <a
                ><span class="drawer_span">{{
                  $t("Navigation_bars.speakers")
                }}</span
                ><br /><span class="spanss">{{
                  $t("Navigation_bars2.speakers")
                }}</span></a
              >
              <!-- 建材 -->
              <div class="drawer_img">
                <img src="../../public/img/team/Acc_category.jpg" alt="" />
              </div>
            </li>
            <li @click="drawerRout(2)">
              <!-- 家具 -->
              <a
                ><span class="drawer_span">{{
                  $t("Navigation_bars.headphones")
                }}</span>
                <br /><span class="spanss">{{
                  $t("Navigation_bars2.headphones")
                }}</span></a
              >
              <div class="drawer_img">
                <img
                  src="../../public/img/team/Speakers_Burger_Contrast.jpg"
                  alt=""
                />
              </div>
            </li>

            <li @click="drawerRout(3)">
              <!-- 电器 -->
              <a
                ><span class="drawer_span">{{
                  $t("Navigation_bars.appliance")
                }}</span>
                <br /><span class="spanss">{{
                  $t("Navigation_bars2.appliance")
                }}</span></a
              >
              <div class="drawer_img">
                <img
                  src="../../public/img/team/Speakers_Burger_Contrast.jpg"
                  alt=""
                />
              </div>
            </li>

            <!-- 设计师 -->
            <li @click="drawerRout(4)">
              <a
                ><span class="drawer_span">{{
                  $t("Navigation_bars.televisions")
                }}</span
                ><br />
                <span class="spanss">{{
                  $t("Navigation_bars2.televisions")
                }}</span></a
              >
              <div class="drawer_img">
                <img src="../../public/img/team/shejis.jpg" alt="" />
              </div>
            </li>
            <!-- <li>
              <a><span class="drawer_span" @click="drawerRout(4)">{{$t("Navigation_bars.accessories")}}</span></a>
              <div class="drawer_img"><img src="../../public/img/team/TV_Burger.jpg" alt=""></div>
            </li> -->
            <!-- 楼盘 -->
            <li @click="drawerRout(5)">
              <a
                ><span class="drawer_span">{{
                  $t("Navigation_bars.floors")
                }}</span>
                <br />
                <span class="spanss">{{
                  $t("Navigation_bars2.floors")
                }}</span></a
              >
              <div class="drawer_img">
                <img src="../../public/img/team/lpan.jpg" alt="" />
              </div>
            </li>
            <!-- 头条 -->
            <li @click="drawerRout(6)">
              <a
                ><span class="drawer_span">{{
                  $t("Navigation_bars.Headlines")
                }}</span
                ><br />
                <span class="spanss">{{
                  $t("Navigation_bars2.Headlines")
                }}</span></a
              >
              <div class="drawer_img">
                <img
                  src="../../public/img/team/Headphones_Cat_Burger.jpg"
                  alt=""
                />
              </div>
            </li>
          </ul>
        </div>
      </el-drawer>
    </div>
    <LoginDialog
      :loginDialog="dialog"
      @close="dialogData"
      v-if="dialog"
    ></LoginDialog>
  </div>
</template>

<script>
let Base64 = require("js-base64").Base64;
import LoginDialog from "@/components/LoginDialog.vue";
export default {
  data() {
    return {
      drawer: false, //是否打开抽屉
      direction: "ltr", //打开抽屉的方向
      language: "English", //国际化，显示语言
      goodsValue: 0, //购物车数量标记
      // userName: '', //用户账号
      // nameBool: true,  //用户图标的显示隐藏
      dialog: false, //是否打开登陆对话框
      searchValue: "", // 搜索框，value值
    };
  },
  inject: ["reload"],
  components: {
    LoginDialog,
  },
  methods: {
    // 搜索框
    search() {
      if (this.searchValue.replace(/\s+/g, "") !== "") {
        this.$router.push({
          path: "/search",
          query: { searchValue: this.searchValue.replace(/\s+/g, "") },
        });
        this.reload();
      }
    },
    // 搜索回车按键
    onEnterPress() {
      this.search();
    },
    // 子组件传值过来
    dialogData(datas) {
      var _this = this;
      _this.dialog = datas;
    },
    // 抽屉，跳转到对应页面
    drawerRout(i) {
      var _this = this;
      switch (i) {
        case 1:
          _this.$router.push({ path: "/buildingMaterial" });
          // _this.drawer = false;
          window.location.reload();
          break;
        case 2:
          _this.$router.push({ path: "/furniture" });
          window.location.reload();
          // _this.drawer = false;
          break;
        case 3:
          _this.$router.push({ path: "/appliance" });
          // _this.drawer = false;
          window.location.reload();
          break;
        case 4:
          _this.$router.push({ path: "/brand" });
          // _this.drawer = false;
          window.location.reload();
          break;
        case 5:
          _this.$router.push({ path: "/floors" });
          // _this.drawer = false;
          window.location.reload();
          break;
        case 6:
          _this.drawer = false;
          break;
        default:
          _this.drawer = false;
      }
    },
    // 跳转到登陆页面
    login() {
      this.$router.push({ path: "/login" });
    },
    // 跳转到购物车页面
    shoppingTrolley() {
      var _this = this;
      if (_this.$Cookie.getCookie("token") != undefined) {
        _this.$router.push({ path: "/shopping" });
      } else {
        _this.dialog = true; //显示登录对话框
      }
    },
    // 导航栏左边菜单是否打开
    ElDrawer() {
      this.drawer = true;
    },
    // 国际化，下拉菜单触发事件
    handleCommand(command) {
      // 把选择的语言永久储存到页面中
      localStorage.setItem("locale", command);
      // 修改要显示的语言
      this.$i18n.locale = command;
      if (command == "zh") {
        this.language = "中文";
      } else if (command == "en") {
        this.language = "English";
      }
    },
    // 个人信息
    personal() {
      this.$router.push({ path: "/personalDetails" });
    },
    // 个人积分
    integ() {
      this.$router.push({ path: "/PointsExchange" });
    },
    // 我的订单
    myorder() {
      this.$router.push({ path: "/accountInformation/myorder" });
    },
    // 修改密码
    changepass() {
      this.$router.push({ path: "/changePassword" });
    },
    // 退出登陆
    logout() {
      this.$Cookie.removeCookie("token"); //删除token
      this.$Cookie.removeCookie("userID"); //删除用户id
      this.$Cookie.removeCookie("strData"); //删除微信二维码的随机数
      this.$Cookie.removeCookie("userLevel"); //删除用户等级
      this.$store.commit("header", { nameBool: true, userName: "" }); //header组件，用户名，隐藏用户名，赋值空
      this.$store.commit("goods", []); //购物车数量赋值空
    },
    // 监听页面刷新
    monitorPage() {
      var _this = this;
      if (_this.$Cookie.getCookie("token") != undefined) {
        _this.$get(`cart/${_this.$Cookie.getCookie("userID")}`).then((res) => {
          if (res.code == 200) {
            let datas = [];
            for (let i = 0; i < res.data.length; i++) {
              let idNums = {
                goods_id: res.data[i].goods_id,
                num: res.data[i].num,
              };
              datas.push(idNums);
            }
            _this.$store.commit("goods", datas);
          }
        });
      }
    },
  },
  created() {
    window.addEventListener("beforeunload", (e) => _this.monitorPage(e));
    var _this = this;
    let SValue = _this.$route.query.searchValue;
    if (SValue != undefined) {
      _this.searchValue = _this.$route.query.searchValue;
    } else {
      _this.searchValue = "";
    }
    if (localStorage.getItem("locale") == "zh") {
      _this.language = "中文";
    } else {
      _this.language = "English";
    }
    if (_this.$Cookie.getCookie("token") != undefined) {
      // 显示账号
      _this.$store.commit("header", {
        nameBool: false,
        userName: Base64.decode(_this.$Cookie.getCookie("userMobile")),
      }); //header组件，用户名
    } else {
      _this.$store.commit("header", { nameBool: true, userName: "" }); //header组件，用户名
      _this.$store.commit("goods", []);
    }
  },
  destroyed() {
    window.removeEventListener("beforeunload", (e) => this.monitorPage(e));
  },
};
</script>

<style lang="less" scoped>
@import "../../public/css/style.css";
#head {
  font-size: 0px;
  min-width: 1190px;
}
a {
  color: black;
}
a:hover {
  text-decoration: none;
  color: black;
}
// icon图标
.el-icon-menu {
  font-size: 22px;
  width: 22px;
  height: 22px;
  // line-height: 50px;
  color: white;
  margin-right: 7px;
}
.el-icon-s-goods {
  margin-right: 20px;
  vertical-align: top;
  color: white;
}
.el-icon-user-solid {
  margin-right: 20px;
  color: white;
  position: relative;
  top: 3px;
}
// // icon图标结束
// h3{
//   display: inline-block;
//   left: 30%;
//   margin-bottom: 15px;
//   margin: 0px;
//   height: 61px;
//   img {
//     height: 100%;
//   }
// }
.ng_top {
  display: flex;
  padding: 0px 40px;
  // justify-content: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  background-color: rgba(0, 0, 0, 0.5); //透明背景
  // icon图标结束
  h3 {
    display: inline-block;
    // left: 18%;
    right: 100px;
    margin-bottom: 15px;
    margin: 0px;
    height: 61px;
    width: 240px;
    img {
      height: 100%;
    }
  }
}
.ng_icon {
  padding-top: 13px;
  .ng_user_name {
    display: inline-block;
    margin-left: 7px;
    margin-right: 7px;
    .ng_span {
      display: inline-block;
      margin-right: 18px;
      h5 {
        vertical-align: sub;
        margin: 0px;
        display: inline-block;
        width: 50px;
        overflow: hidden;
        text-transform: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: white;
        font-size: 13px;
        font-family: inherit;
      }
      .el-icon-arrow-down {
        color: white;
      }
    }
  }
  .ng_item {
    top: -5px;
    span {
      display: inline-block;
    }
  }
  /deep/ .el-badge__content.is-fixed {
    right: 30px;
    border: 1px solid #f56c6c;
  }
  .el-icon-user-solid,
  .el-icon-s-goods {
    font-size: 24px;
  }
  .searchBox {
    // position: relative;
    margin-left: 20px;
    display: inline-block;
    vertical-align: top;
    // border: 1px solid red;
    font-size: 15px;

    input {
      height: 27px;
      width: 120px;
      border: 1px solid #eee;
      background-color: transparent;
      color: #eee;
      border-radius: 4px;
      padding-left: 10px;
    }
    .el-icon-search {
      vertical-align: top;
      display: inline-block;
      height: 27px;
      width: 27px;
      margin-left: 5px;
      padding-top: 6px;
      color: #eee;
      cursor: pointer;
    }
    // .searchResult {
    //   border: 1px solid red;
    //   position: absolute;
    //   top: 33px;
    //   left: 0px;
    //   width: 300px;
    //   text-align: left;
    //   padding: 5px;
    //   ul {
    //     li {
    //       border-bottom: 1px solid yellow;
    //       cursor: default;
    //     }
    //     li:hover {
    //       background-color: #ccc;
    //     }
    //   }
    // }
  }
}
// 国际化下拉框
/deep/ .ng_button {
  width: 75px;
  margin-right: 11px;
  margin-left: 11px;
  vertical-align: bottom;
  height: 26px;
  line-height: 30px;
  padding: 0px !important;
}
/deep/ .el-button--primary {
  background-color: transparent !important;
  color: white;
  border: none;
}
/deep/ .el-button--primary:focus,
.el-button--primary:hover {
  color: white;
}
/deep/ .el-icon--right {
  margin-left: 3px;
}
/deep/ .el-drawer__body {
  z-index: 1100;
  font-size: 16px;
}
/deep/ .el-drawer__header {
  padding-right: 30px;
}
/deep/ .el-drawer {
  background-color: #999;
}
/deep/ .el-header[data-v-fae5bece] {
  line-height: 20px !important;
}
/deep/ .el-drawer__close-btn {
  width: 35px !important;
  height: 35px !important;
  border: solid 2px #83c0ff;
  border-radius: 3px;
}
.drawer_content {
  width: 100%;
  text-align: left;
  position: relative;
  min-width: 960px;
  ul {
    width: 440px;
    li {
      height: 2.5em;
      line-height: 2.5em;
      font-size: 2em;
      padding-left: 30px;
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        color: white;
        text-decoration: none;
        opacity: 1;
        span {
          letter-spacing: 2px;
          transition-duration: 0.5s;
        }
      }
    }
    li a:hover {
      span {
        opacity: 0.7;
        color: black;
        padding-left: 50px;
        transition-duration: 0.5s;
      }
      .drawer_span::after {
        width: 100%;
        opacity: 1;
      }
    }
    li:hover .drawer_img {
      display: block;
    }
  }
}
.el-menu.el-menu--horizontal {
  border: none;
}

.drawer_span {
  position: relative;
  letter-spacing: 2px;
}
.drawer_span::after {
  content: "";
  position: absolute;
  display: block;
  height: 2px;
  width: 15px;
  bottom: -28px;
  left: 0px;
  background: rgb(255, 255, 255);
  opacity: 1;
  transition-property: width;
  transition-duration: 0.5s;
}

/deep/ .el-icon {
  color: white;
}
.drawer_img {
  width: 1056px;
  height: auto;
  display: inline-block;
  position: absolute;
  top: 100px;
  left: 430px;
  display: none;
}
a:link {
  text-decoration: none;
}
a:visited {
  color: black;
  text-decoration: none;
}
// .searchResult {
//   font-size: 15px;
// }

@media screen and (max-width: 999px) {
  .drawer_content {
    li {
      font-size: 1.5em !important;
    }
  }
  .drawer_img {
    width: 640px;
    left: 230px;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1129px) {
  .drawer_content {
    li {
      font-size: 1.6em !important;
    }
  }
  .drawer_img {
    width: 730px;
    left: 270px;
  }
}
@media screen and (min-width: 1130px) and (max-width: 1259px) {
  .drawer_content {
    li {
      font-size: 1.7em !important;
    }
  }
  .drawer_img {
    width: 820px;
    left: 310px;
  }
}
@media screen and (min-width: 1260px) and (max-width: 1369px) {
  .drawer_content {
    li {
      font-size: 1.8em !important;
    }
  }
  .drawer_img {
    width: 900px;
    left: 350px;
  }
}
@media screen and (min-width: 1370px) and (max-width: 1489px) {
  .drawer_content {
    li {
      font-size: 1.9em !important;
    }
  }
  .drawer_img {
    width: 970px;
    left: 390px;
  }
}
@media screen and (min-width: 1490px) {
  .drawer_img {
    width: 1056px;
    left: 430px;
  }
}
.servicePhone {
  max-width: 430px;
  float: right;
  line-height: 60px;
  margin-right: 20px;
  font-size: 17px;
  color: white;
}

.spanss {
  float: left;
  margin-top: -48px;
  font-size: 15px;
}
.cs {
  // background-color: rosybrown;
}
</style>